<template>
  <van-nav-bar
      title="收藏站点"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div style="height: 10px"></div>
  <van-row v-show="flag">
    <van-col span="18" offset="3">
      <van-empty image="search" description="描述文字" />
    </van-col>
  </van-row>
  <van-row v-show="!flag" >
    <van-col span="24">
      <van-swipe-cell :before-close="beforeClose">
        <van-card v-for="item in listData"
                  :desc="item.desc"
                  :title="item.sysSite.address"
                  class="goods-card"
                  :thumb="item.sysSite.image"
        >
        </van-card>
      </van-swipe-cell>
    </van-col>
  </van-row>


</template>

<script setup>
import {ref} from "vue"
import {getCollectSiteList,delSite} from "@/api/userinfo.js";
import { showConfirmDialog } from 'vant';
const onClickLeft = () => history.back();
const flag=ref(false);
const listData=ref([])
//查询所有的收藏站点
const list=async ()=>{
  const{data}=await getCollectSiteList();
  if (data.data.length>0){
    flag.value=false;
    listData.value=data.data
    listData.value.forEach(even=>{
      even.desc=''+even.sysSite.provinceName+even.sysSite.cityName+even.sysSite.areaName
    })
    console.log(listData.value)
  }else{
    flag.value=true;
  }
}
onMounted(()=>{
  list();
})

const del=async (id)=>{
  const {data}=await delSite(id);
  if (data.code===200){
    showNotify({ type: 'success', message: '删除成功' });
    list();
  }else{
    showNotify({ type: 'fail', message: data.msg });
  }
}

const beforeClose = ({ position }) => {
  switch (position) {
    case 'left':
    case 'cell':
    case 'outside':
      return true;
    case 'right':
      return new Promise((resolve) => {
        showConfirmDialog({
          title: '确定删除吗？',
        })
            .then(async () =>{
              const {data}=await delSite(id);
              if (data.code===200){
                showNotify({ type: 'success', message: '删除成功' });
                list();
              }else{
                showNotify({ type: 'fail', message: data.msg });
              }
              resolve(true);
            })
            .catch(() => resolve(false));
      });
  }
}
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: #ffffff;
}

.delete-button {
  height: 100%;
}
</style>